<template>
  <v-content ref="content">
    <v-statusbar class="status-bar"></v-statusbar>
    <div class="header padding">
      <div class="title">AI助学</div>
    </div>

    <!-- AI功能模块 -->
    <div class="ai-modules padding">
      <!-- 功能卡片容器 - 包含所有四个模块 -->
      <div class="modules-container">
        <!-- 学习计划模块 -->
        <div class="module-card module-card-hover" @click="toStudyPlan">
          <div class="module-icon">
            <image src="/static/image/studyPlan.png" mode="aspectFit"></image>
          </div>
          <div class="module-info">
            <div class="module-title">AI个性化学习计划</div>
            <div class="module-desc">AI定制课后学习路径，科学规划备考</div>
          </div>
          <div class="module-arrow">
            <uni-icons type="right" size="20" color="#999"></uni-icons>
          </div>
        </div>
        <!-- AI智能练习模块 -->
        <div class="module-card module-card-hover" @click="toAIPractice">
          <div class="module-icon">
            <image src="/static/image/personalize.png" mode="aspectFit"></image>
          </div>
          <div class="module-info">
            <div class="module-title">AI随堂练习</div>
            <div class="module-desc">个性化习题推荐，高效提升成绩</div>
          </div>
          <div class="module-arrow">
            <uni-icons type="right" size="20" color="#999"></uni-icons>
          </div>
        </div>
        <!-- 考情分析模块 -->
        <div class="module-card module-card-hover" @click="toExamAnalysis">
          <div class="module-icon">
            <image src="/static/image/analyze.png" mode="aspectFit"></image>
          </div>
          <div class="module-info">
            <div class="module-title">AI可视化考情分析</div>
            <div class="module-desc">智能分析学习数据，掌握学习趋势</div>
          </div>
          <div class="module-arrow">
            <uni-icons type="right" size="20" color="#999"></uni-icons>
          </div>
        </div>
        <!-- 资源推荐模块 -->
        <div class="module-card module-card-hover" @click="toResourceList">
          <div class="module-icon">
            <image src="/static/image/sourse.png" mode="aspectFit"></image>
          </div>
          <div class="module-info">
            <div class="module-title">AI课后学习资源推荐</div>
            <div class="module-desc">精选学习资料，助力高效学习</div>
          </div>
          <div class="module-arrow">
            <uni-icons type="right" size="20" color="#999"></uni-icons>
          </div>
        </div>
      </div>

      <!-- AI助手快捷入口 -->
      <div class="chat-assistant-card chat-hover" @click="toAIChat">
        <div class="chat-icon">
          <image src="/static/image/paperPlane.png" mode="aspectFit"></image>
        </div>
        <div class="chat-info">
          <div class="chat-title">AI课堂问答助手</div>
          <div class="chat-desc">有任何问题？随时向我提问</div>
        </div>
      </div>

      <!-- 使用提示 -->
      <div class="usage-tips">
        <div class="tips-title">使用提示</div>
        <div class="tips-content">
          <text>• 智能练习功能已上线，点击即可体验</text>
          <text>• 其他功能正在紧锣密鼓开发中</text>
          <text>• AI学习助手可随时解答您的疑问</text>
        </div>
      </div>
    </div>

    <v-tabbar current="4"></v-tabbar>
  </v-content>
</template>

<script>
import mixins from "@/mixins"

export default {
  name: "ai-index",
  mixins: [mixins],
  data() {
    return {
      // 可以添加一些数据
    }
  },
  methods: {
    init() {
      // 初始化数据
    },
    // 跳转到考情分析
    toExamAnalysis() {
      // this.showMessage.info("考情分析功能开发中")
      this.toPage('/pages/AI/examAnalysis')
    },
    // 跳转到AI智能练习
    toAIPractice() {
      this.toPage('/pages/AI/aiPractice')
    },
    // 跳转到学习计划
    toStudyPlan() {
      // this.showMessage.info("学习计划功能开发中")
      this.toPage('/pages/AI/studyPlan')
    },
    // 跳转到AI聊天助手
    toAIChat() {
      this.toPage('/pages/AI/chat')
    },
    // 跳转到资源列表
    toResourceList() {
      this.toPage('/pages/AI/resourceList')
    }
  },
  onLoad() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
@import "../basis.scss";
@import "./index.scss";

.ai-modules {
  padding-top: 20rpx;

  .modules-container {
    // 使用更合适的布局，适应移动端屏幕
    margin-bottom: 30rpx;
  }

  .module-card {
    // 调整卡片宽度，确保在各种屏幕尺寸下显示良好
    width: 100%;
    height: 150rpx;
    display: flex;
    align-items: center;
    padding: 30rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 8rpx;
      height: 100%;
      background: transparent;
      transition: background 0.3s ease;
    }

    // 添加悬停效果
    &.module-card-hover {
      &:hover {
        transform: translateY(-4rpx);
        box-shadow: 0 8rpx 30rpx rgba(71, 107, 255, 0.15);
      }
    }

    .module-icon {
      width: 80rpx;
      height: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 16rpx;
      margin-right: 20rpx;
      transition: all 0.3s ease;
      // 统一所有模块图标的背景色
      background: linear-gradient(135deg, rgba(71, 107, 255, 0.15) 0%, rgba(71, 107, 255, 0.08) 100%);

      image {
        width: 50rpx;
        height: 50rpx;
      }
    }

    .module-info {
      flex: 1;

      .module-title {
        font-size: 30rpx;
        font-weight: bold;
        color: $uni-text-color; // 使用全局文字基本色
        margin-bottom: 4rpx;
        letter-spacing: 0.5rpx;
      }

      .module-desc {
        font-size: 22rpx;
        color: $uni-text-color-grey; // 使用全局辅助灰色
        line-height: 1.4;
      }
    }

    .module-arrow {
      width: 32rpx;
      height: 32rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: transform 0.3s ease;

      image {
        width: 20rpx;
        height: 20rpx;
        color: #999;
      }
    }

    // 鼠标悬停时箭头移动动画和左侧边框变色
    &:hover {
      .module-arrow {
        transform: translateX(8rpx);
      }

      &::before {
        background: $primary; // 使用主题色
      }
    }
  }

  // 为最后一个模块调整下边距，确保与下一个元素的间距一致
  .module-card:last-child {
    margin-bottom: 0;
  }

  // AI聊天助手卡片
  .chat-assistant-card {
    display: flex;
    align-items: center;
    padding: 30rpx;
    background: linear-gradient(135deg, $primary 0%, #6a8bff 100%); // 使用主题色渐变
    border-radius: 20rpx;
    color: $uni-text-color-inverse; // 使用全局反色
    margin-bottom: 30rpx;
    transition: all 0.3s ease;
    box-shadow: 0 10rpx 30rpx rgba(71, 107, 255, 0.3);
    position: relative;
    overflow: hidden;

    // 添加装饰元素，增强层次感
    &::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 200rpx;
      height: 200rpx;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      transform: scale(0.8);
      animation: float 6s ease-in-out infinite;
    }

    &::after {
      content: '';
      position: absolute;
      bottom: -30%;
      left: -20%;
      width: 150rpx;
      height: 150rpx;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      transform: scale(0.6);
      animation: float 4s ease-in-out infinite 1s;
    }

    // 添加悬停效果
    &.chat-hover {
      &:hover {
        transform: translateY(-4rpx);
        box-shadow: 0 15rpx 40rpx rgba(71, 107, 255, 0.4);
      }
    }

    .chat-icon {
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.2);
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 30rpx;
      position: relative;
      z-index: 1;

      // 添加图标呼吸效果
      &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        animation: pulse 2.5s ease-in-out infinite;
      }

      image {
        width: 50rpx;
        height: 50rpx;
        filter: invert(1);
        position: relative;
        z-index: 2;
      }
    }

    .chat-info {
      flex: 1;
      position: relative;
      z-index: 1;

      .chat-title {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 8rpx;
        letter-spacing: 0.5rpx;
      }

      .chat-desc {
        font-size: 24rpx;
        opacity: 0.9;
        letter-spacing: 0.3rpx;
      }
    }
  }

  // 使用提示
  .usage-tips {
    background-color: $uni-bg-color; // 使用全局背景色
    border-radius: 20rpx;
    box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.2);
    padding: 24rpx;

    .tips-title {
      font-size: 26rpx;
      font-weight: bold;
      color: $primary; // 使用主题色
      margin-bottom: 16rpx;
      letter-spacing: 0.5rpx;
    }

    .tips-content {
      display: flex;
      flex-direction: column;
      gap: 12rpx;

      text {
        font-size: 22rpx;
        color: $uni-text-color-grey; // 使用全局辅助灰色
        line-height: 1.6;
        letter-spacing: 0.3rpx;
      }
    }
  }
}

// 添加浮动动画
@keyframes float {
  0% {
    transform: scale(0.8) translateY(0);
  }

  50% {
    transform: scale(1) translateY(-20rpx);
  }

  100% {
    transform: scale(0.8) translateY(0);
  }
}

// 增强脉冲动画
@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.2);
    opacity: 0;
  }

  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
}
</style>
